<template>
	<navbar title="城市巡回" :isBack="true"></navbar>

	<view class="page">
		<view class="" style="margin: 35rpx;border-radius: 10rpx;background-color: white;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;" @click="detail(item)" v-for="item in list">
			<view class=""
				style="width: 100%;height: 284rpx;">
				<image :src="item.banner" style="height: 284rpx;width: 100%;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" mode="aspectFill"></image>
			</view>
			<view class=""
				style="padding: 25rpx;background-color: white;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;display: flex;justify-content: space-between;">
				<view class="">
					<view class="" style="font-size: 40rpx;font-weight: bold;">
						{{item.address}}
					</view>
					<view class="" style="margin-top: 36rpx;font-size: 24rpx;">
						比赛开始时间：{{item.start_date}}
					</view>
				</view>
				<view class="">
					<view class="" style="color: #FF4520;font-weight: bold;margin-top: 6rpx;">
						<span style="font-size: 22rpx;">￥</span>
						<span style="font-size: 34rpx;">{{item.price}}</span>
					</view>
					<view class="" 
						style="width: 136rpx;height: 51rpx;display: flex;justify-content: center;align-items: center;border-radius: 25rpx;color: white;background: linear-gradient(90deg, #5062A7, #3B4C82);font-size: 24rpx;margin-top: 30rpx;">
						查看详情
					</view>
				</view>
			</view>
		</view>
		<view  v-if="list.length <= 0">
				<nodata></nodata>
			</view>
	</view>


</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
		import nodata from '@/components/nodata.vue'
	import { cityIndex, cityList } from '@/service/api/city'
	import tools from '@/utils/tools'
	const bannerList = ref([1, 2, 3]);
	onShow(() => {
		getData()
	})
	const Info = reactive({
		detail: "",
		id: "",
		images: [] as any,
		memo: "",
		name: "",
		stage: [] as any,
		state: ""
	})
	const list = ref([


	])
	const getData = async () => {
		const res = await cityList("");
		// for (let i in Info) {
		// 	Info[i] = res.msg[i];
		// }
		list.value = res.msg;
		console.log(res);
	}
	const sumbit = (index : number, item : any) => {

		//0是报名 1是预约
		if (index == 0) {
			uni.navigateTo({
				url: '/pagesB/speededUp/fill?id=' + item.id + '&type=1'
			})
		} else {
			uni.navigateTo({
				url: '/pagesB/custom/agree'
			})

		}
	}
	const detail = (item : any) => {
		uni.navigateTo({
			url: "/pagesB/city/detail?id=" + item.id
		})
	}
	//去支付
	const pay = (item) => {
		if (item.enroll_id) {
			tools.navTo('/pagesB/order/pay?id=' + item.enroll_id + '&type=2');
		} else {
			tools.showToast('没有订单ID')
		}
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;
		overflow: hidden;
		padding-bottom: 100rpx;
	}

	.title-right {
		display: flex;
		align-items: center;

		.image {
			width: 36rpx;
			height: 36rpx;
		}

		.text {
			font-size: 28rpx;
			margin-left: 5rpx;
		}
	}
</style>